<template>
  <!-- 上报人信息 -->
  <div v-if="thisDiv === 3">
    <table>
      <slot name="left"/>
      <tr>
        <td class="td-title">姓名</td>
        <td>{{ formData.baqsjRecordReport.name || '' }}</td>
        <td class="td-title">工号</td>
        <td>{{ formData.baqsjRecordReport.empNo || '' }}</td>
        <td class="td-title">职称</td>
        <td>{{ formData.baqsjRecordReport.stationName || '' }}</td>
        <td class="td-title">部门/病区</td>
        <td>{{ formData.baqsjRecordReport.deptName || '' }}</td>
      </tr>
      <tr>
        <td class="td-title">岗位</td>
        <td>{{ formData.baqsjRecordReport.usergroupName || '' }}</td>
        <td class="td-title">手机号</td>
        <td>{{ formData.baqsjRecordReport.mobileNo || '' }}</td>
        <td class="td-title">上报日期/时间</td>
        <td colspan="3">{{ formData.baqsjRecordReport.reportTime || '' }}</td>
      </tr>
      <slot name="right"/>
    </table>
  </div>
  <div v-else style="display: flex; width: 100%; flex-wrap: wrap; ">
    <slot name="left"/>
    <!-- 上报人信息 -->
    <el-form-item label="姓名" prop="name">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入名字"
        v-model="formData.baqsjRecordReport.name"
        disabled
      />
    </el-form-item>

    <el-form-item label="工号" prop="empNo">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入工号"
        v-model="formData.baqsjRecordReport.empNo"
        disabled
      />
    </el-form-item>

    <el-form-item label="职称" prop="stationName">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入职称"
        v-model="formData.baqsjRecordReport.stationName"
        disabled
      />
    </el-form-item>

    <el-form-item label="部门/病区" prop="deptName">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入部门/病区"
        v-model="formData.baqsjRecordReport.deptName"
        disabled
      />
    </el-form-item>

    <el-form-item label="岗位" prop="usergroupName">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入岗位"
        v-model="formData.baqsjRecordReport.usergroupName"
        disabled
      />
    </el-form-item>

    <el-form-item label="手机号" prop="mobileNo">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入手机号"
        v-model="formData.baqsjRecordReport.mobileNo"
        disabled
      />
    </el-form-item>

    <el-form-item label="上报日期/时间" prop="reportTime">
      <el-input
        :style="{ width: '200px' }"
        placeholder="上报日期"
        v-model="formData.baqsjRecordReport.reportTime"
        disabled
      />
      <el-button type="primary" style="margin-left: 10px" @click="clickAnonymous">
        {{ formData.baqsjRecordReport.anonymous === 1? '取消匿名': '匿名上报' }}
      </el-button>
    </el-form-item>
    <slot name="right"/>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    thisDiv: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      userInfoCopy: {},
      // 只用一次，拷贝当前用户信息，给匿名，取消匿名使用
      isCopy: false
    }
  },
  methods: {
    clickAnonymous() {
      // 匿名上报
      if (this.formData.baqsjRecordReport.anonymous && this.formData.baqsjRecordReport.anonymous === 1) {
        this.formData.baqsjRecordReport.anonymous = 0
        // 恢复用户信息,这里为何要单字段，因为其他模块共用了此模块的其他字段，所以不能直接覆盖了
        this.formData.baqsjRecordReport.name = this.userInfoCopy.name
        this.formData.baqsjRecordReport.empNo = this.userInfoCopy.empNo
        this.formData.baqsjRecordReport.deptName = this.userInfoCopy.deptName
        this.formData.baqsjRecordReport.mobileNo = this.userInfoCopy.mobileNo
      } else {
        // 只拷贝一次，避免重复拷贝时，字段就掉了
        if (!this.isCopy) {
          this.isCopy = true
          this.userInfoCopy = JSON.parse(JSON.stringify(this.formData.baqsjRecordReport))
        }
        this.formData.baqsjRecordReport.anonymous = 1
        // 匿名上报,需要匿名的字段
        this.formData.baqsjRecordReport.name = '匿名用户'
        this.formData.baqsjRecordReport.empNo = '匿名用户'
        this.formData.baqsjRecordReport.deptName = '匿名用户'
        this.formData.baqsjRecordReport.mobileNo = '匿名用户'
      }
    }
  }
}
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
